<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>绑定内联样式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>
<body>
<div id="app1" v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">绑定内联样式</div>

<!--直接绑定一个对象通常会更好-->
<div id="app2" v-bind:style="styleObject">绑定内联样式，直接绑定一个样式对象</div>

<!--数组语法-->
<div id="app3" v-bind:style="[baseStyles,overridingStyles]">绑定内联样式，数组语法</div>

<!--多重值-->
<div id="app4" :style="{display:['-webbit-box','-ms-flexbox','flex']}">多重值</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app1',
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })

    new Vue({
        el:'#app2',
        data: {
            styleObject : {
                color : 'red',
                fontSize: '13px'
            }
        }
    })

    new Vue({
        el:'#app3',
        data :{
            baseStyles:{ color : 'red'},
            overridingStyles:{ fontSize: '18px'}
        }
    })

    new Vue({
        el:'#app4',
        data:{
            flex:'none'
        }
    })

</script>
</html>